<template>
    <div>
        <!-- 头部开始 -->
            <Header></Header>
        <!-- 头部结束 -->

        <!-- 表单区域 -->
        <div class="udlite-container partners">
            <a-form-item label="账号" v-bind="formlayout">
                <a-input v-model="username" placeholder="请输入您的用户名"/>
            </a-form-item>
            <a-form-item label="手机" v-bind="formlayout">
                <a-input v-model="phone" placeholder="请输入您的电话号码"/>
            </a-form-item>
            <a-form-item label="邮箱" v-bind="formlayout">
                <a-input v-model="email" placeholder="请输入您的邮箱"/>
            </a-form-item>
            <a-form-item label="余额" v-bind="formlayout">
                <a-input v-model="money" placeholder="请输入您的余额"/>
            </a-form-item>
            <a-form-item label="会员等级" v-bind="formlayout">
                <a-input v-model="role" placeholder="请输入您的会员等级"/>
            </a-form-item>
            <a-form-item label="密码" v-bind="formlayout">
                <a-input-password v-model="password" placeholder="请输入您的密码" />
            </a-form-item>
            <a-form-item label="确认密码" v-bind="formlayout">
                <a-input-password v-model="password1" placeholder="请输入您的确认密码密码" />
            </a-form-item>
        </div> 
            <a-form-item v-bind="buttonlayout">
               <a-button type="primary"  @click="submit">注&emsp;册</a-button>
               <a-button type="primary"  @click="empty">重&emsp;置</a-button>
            </a-form-item>
        <!--  尾部开始-->
            <Footer ></Footer>
        <!-- 尾部结束 -->
    </div>
</template>

<script>
import Header from './Header.vue'
import Footer from './Footer.vue'
import axios from 'axios'
export default {
    data() {
        return {
            username: "",
            password: "",
            password1: "",
            phone:"",
            money:0,
            role:1,
            email:"",
            key:1,
            code:'',
            token:localStorage.getItem('token'),
            src:'http://127.0.0.1:8000/my_code/',
            base_url:"http://127.0.0.1:8000/",
            //表单样式
            formlayout:{
                //标签
                labelCol:{
                    xs:{span:0},
                    sm:{span:4}
                },
                //文本框
                wrapperCol:{
                    xs:{span:4},
                    sm:{span:20}
                }
            },
            //按钮样式
            buttonlayout:{
                // 按钮
                wrapperCol:{
                    xs:{
                        span:24,
                        offset:0 
                    },
                    sm:{span:16,offset:8}
                }
            }
        }
    },
    components: { Header, Footer },
    methods: {
        submit:function(){
            if (this.username == ""){
                this.$message.info("用户名不能为空");
                return false;
            }
            if (this.phone == ""){
                this.$message.infot("手机号不能为空");
                return false;
            }
            if (this.email == ""){
                this.$message.info("邮箱不能为空");
                return false;
            }
            if (this.password == ""){
                this.$message.info("密码不能为空");
                return false;
            }
            if (this.password1 == ""){
                this.$message.info("请重新输入密码");
                return false;
            }
            axios({
                url: this.base_url + 'register/',
                method:'post',
                data:{
                    username: this.username,
                    password: this.password,
                    password1: this.password1,
                    phone:this.phone,
                    role:this.role,
                    money:this.money,
                    email:this.email,
                }
            }).then(resp=>{
                console.log(resp.data);
                this.$message.info(resp.data.msg)  
            })
        },
        // 重置
        empty(){
            if(this.username){
                this.username = '',
                this.$message.loading('重置用户');
            }
            if(this.gender){
                this.gender = '',
                this.$message.loading('重置性别');
            }
            if(this.phone){
                this.phone = '',
                this.$message.loading('重置手机');
            }
            if(this.email){
                this.email = '',
                this.$message.loading('重置邮箱');
            }
            if(this.password){
                this.password = '',
                this.$message.loading('重置密码');
            }
            if(this.password1){
                this.password1 = '',
                this.$message.loading('重置确认密码');
            }
        },
    },
    created() {

    }
}
</script>

<style scoped>

</style>
